<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8 top-bar">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="Refresh"></right-toolbar>

    </el-row>

    <el-row id="title" type="flex" align="middle">
      <el-col :span="2">
        <el-select v-model="queryParams.type" placeholder="选择单据类型" clearable>
          <el-option label="资产入库" value="type1"></el-option>
          <el-option label="资产派发" value="type2"></el-option>
          <el-option label="资产退库" value="type3"></el-option>
          <el-option label="资产借出" value="type4"></el-option>
          <el-option label="资产归还" value="type5"></el-option>
          <el-option label="资产调拨" value="type6"></el-option>
          <el-option label="资产维修" value="type7"></el-option>
          <el-option label="资产变更" value="type8"></el-option>
          <el-option label="资产处理" value="type9"></el-option>
          <el-option label="资产盘点" value="type10"></el-option>
          <el-option label="资产交接" value="type11"></el-option>
          <el-option label="耗材入库" value="type12"></el-option>
          <el-option label="耗材派发" value="type13"></el-option>
          <el-option label="耗材处理" value="type14"></el-option>
          <el-option label="采购申请" value="type15"></el-option>
          <el-option label="采购订单" value="type16"></el-option>
          <el-option label="收货管理" value="type17"></el-option>
          <el-option label="保养计划" value="type18"></el-option>
          <el-option label="保养任务" value="type19"></el-option>
          <el-option label="保养执行" value="type20"></el-option>
          <el-option label="保养变更" value="type19"></el-option>

        </el-select>
      </el-col>
      <el-col :span="4">
        <el-date-picker v-model="queryParams.applyDate" type="date" placeholder="申请日期" />
      </el-col>
      <el-col :span="2">
        <el-select v-model="queryParams.number" placeholder="单据编号" clearable>
          <!-- <el-option v-for="option in documentNumbers" :key="option" :label="option" :value="option"></el-option> -->
        </el-select>
      </el-col>
      <el-col :span="4"><el-input v-model="input" placeholder="请输入内容"></el-input>
       
      </el-col>
      <el-col :span="4" offset="4">
        <div class="button-group">
          <el-button @click="reset">重置</el-button>
          <el-button @click="approve">审批</el-button>
        </div>
      </el-col>
    </el-row>

    <vxe-table v-loading="tableData.loading" :data="tableData.list" border highlight-current-row class="data-table">
      <vxe-column field="apply.number" title="单据编号">
        <template #default="{ row }">
          <el-button link type="primary" @click="handleDetail(row)">{{ row.apply.number }}</el-button>
        </template>
      </vxe-column>
      <vxe-column field="apply.createUserName" title="申请人" />
      <vxe-column field="apply.type" title="单据类型" />
      <vxe-column field="apply.createDate" title="申请日期">
        <template #default="{ row }">
          {{ row.apply.createDate | formatDate }}
        </template>
      </vxe-column>
      <vxe-column field="apply.remark" title="备注" />
    </vxe-table>

    <div class="pagination-container">
      <pagination v-show="tableData.paging.total > 0" :total="tableData.paging.total"
        v-model:page="tableData.paging.pageNum" v-model:limit="tableData.paging.pageSize" @pagination="getList" />
    </div>

    <TodoDetail ref="todoDetailDialog" @sub="getList"></TodoDetail>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import api from "./api.js";
import TodoDetail from "./detail/index.vue";
const { proxy } = getCurrentInstance();
const todoDetailDialog = ref();

const documentNumbers = ['编号1', '编号2', '编号3', '编号4'];

const queryParams = reactive({
    type: '',
    applyDate: '',
    number: '',
});

const tableData = reactive({
    loading: false,
    list: [],
    paging: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
    },
});


function getList() {
    tableData.loading = true;
    const { pageNum, pageSize } = tableData.paging;
    const pageReq = { page: pageNum - 1, size: pageSize };
    
    api.list({ ...queryParams }, pageReq).then(response => {
        const { content, totalElements } = response;
        content.forEach(item => {
          if (!item.apply) {
            item.apply = {};
          }
        })
        tableData.list = content; 
        tableData.paging.total = totalElements; 
        tableData.loading = false;
   
    }).catch(() => {
        tableData.loading = false; 
    });
}
function Refresh() {
  proxy.$message.success("刷新成功");
}

function handleDetail(row) {
  todoDetailDialog.value.open(row);
}


function refresh() {
    getList();
}


function reset() {
    queryParams.type = '';
    queryParams.applyDate = '';
    queryParams.number = '';
    getList(); 
}


function approve() {
    console.log('审批功能待实现'); 
}


onMounted(() => {
    getList(); 
});
</script>


<style lang="scss" scoped>
.app-container {
    display: flex;
    flex-direction: column;
    height: 92vh;
    overflow: hidden;
    padding: 20px;
    background-color: #f5f5f5; 
}

.top-bar {
    padding-bottom: 10px;
}

.mb8 {
    margin-bottom: 8px;
}

#title {
    margin-bottom: 12px;
}

.data-table {
    flex: 1;
    overflow: auto;
    background-color: #fff; 
    border-radius: 4px; 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.pagination-container {
    display: flex;
    justify-content: flex-end;
    padding: 10px 0;
}

.button-group {
    display: flex;
    justify-content: flex-start; 
    gap: 10px; 
}

button {
    transition: background-color 0.3s, box-shadow 0.3s; 
}

button:hover {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
</style>
